Skip to content

fix(auth): resolve logout 404 redirect and clean storage cache #83#96

Merged
imuniqueshiv merged 2 commits into
imuniqueshiv:mainfrom
palakgoda:fix/logout-redirect
Jul 8, 2026
Merged

fix(auth): resolve logout 404 redirect and clean storage cache #83#96
imuniqueshiv merged 2 commits into
imuniqueshiv:mainfrom
palakgoda:fix/logout-redirect

Conversation

@palakgoda

@palakgoda palakgoda commented Jul 7, 2026

Copy link
Copy Markdown
Contributor

Pull Request

Description

The Root Cause

The 404 page error and layout crashes during the logout sequence were caused by a race condition between two competing operations:

  1. Hard Browser Reloads: The previous implementation used standard browser navigation (window.location.href), which forced a harsh window reload. This interrupted the single-page application (SPA) execution flow, causing components to unmount violently before global toast handlers or state contexts could complete their execution cycle.
  2. Protected Route Interception: The application state was being cleared instantly while the browser tab was still positioned on a protected dashboard sub-route. The authentication route guard intercepted this unauthenticated state immediately, blocking the app and forcing an invalid redirection fallback that landed on a 404 Not Found screen.

The Fix

To ensure a graceful, secure user experience, we restructured the execution sequence in client/src/components/Navbar.jsx:

  • Native SPA Redirection: Swapped out the raw window.location.href method for React Router's native useNavigate hook targeting the public root route (/).
  • Controlled Lifecycle Execution: Reordered the execution flow within the finally block to trigger the success notification and change the active route before completely dropping the authentication profile hooks. This safely clears out of protected routes before the layout's guard system triggers.
  • Network Fault Tolerance: Enclosed the Axios connection hook in a clean try/catch configuration. This prevents local port synchronization issues or backend connectivity errors from crashing the frontend UI, allowing client state cleanup to finish successfully.

Type of Change

  • New Feature
  • Bug Fix
  • Documentation Update
  • Refactor
  • Performance Improvement
  • Security Improvement
  • Other

Related Issue

Closes #83

Testing

Describe the testing performed.

  • Tested locally
  • Existing functionality verified
  • No new warnings or errors

Screenshots

Checklist

  • Code follows project conventions
  • Documentation updated where required
  • No unnecessary files included
  • Changes have been tested
  • Ready for review

Summary by CodeRabbit

  • Bug Fixes
    • Logout now consistently clears saved user data, returns to the home page, and shows a success message.
    • Improved logout handling when the backend cannot finish clearing session cookies, reducing confusing redirects and leftover local state.

@vercel

vercel Bot commented Jul 7, 2026

Copy link
Copy Markdown

@palakgoda is attempting to deploy a commit to the Shiv Raj Singh's projects Team on Vercel.

A member of the Team first needs to authorize it.

@coderabbitai

coderabbitai Bot commented Jul 7, 2026

Copy link
Copy Markdown

Review Change Stack

Warning

Review limit reached

@palakgoda, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 22 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 9c7959bd-2eb4-4cfa-82ba-5979a7b4273f

📥 Commits

Reviewing files that changed from the base of the PR and between 544b816 and 2fd7fa9.

📒 Files selected for processing (1)
  • client/src/components/Navbar.jsx
📝 Walkthrough

Walkthrough

Both Navbar.jsx and AppContext.jsx update their logout handlers to use React Router's useNavigate for redirecting to "/" instead of window.location.href. Toast notifications and state-clearing order are adjusted, and error handling for failed backend logout calls is modified.

Changes

Logout Flow Fix

Layer / File(s) Summary
Navbar logout handler update
client/src/components/Navbar.jsx
Imports toast, replaces window.location.href redirects with navigate("/"), clears user state and shows a success toast in a finally block, and logs a warning if backend cookie clearance fails.
AppContext logout flow reorder
client/src/context/AppContext.jsx
Adds useNavigate import and instance, moves the success toast and navigate('/') call to execute immediately in the try block before the axios.post logout request, while preserving state updates, error toast, and finally cleanup.

Estimated code review effort: 2 (Simple) | ~10 minutes

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Navbar
    participant AppContext
    participant AuthAPI

    User->>Navbar: Click Logout
    Navbar->>AppContext: call logoutUser()
    AppContext->>AppContext: toast.success("Logged out successfully")
    AppContext->>AppContext: navigate('/')
    AppContext->>AuthAPI: POST /api/auth/logout
    alt request succeeds
        AuthAPI-->>AppContext: 200 OK
    else request fails
        AuthAPI-->>AppContext: error
        AppContext->>AppContext: toast.error(message)
    end
    AppContext->>AppContext: clear userData, setIsLoggedin(false)
    AppContext->>AppContext: setIsLoggingOut(false)
Loading

Estimated code review effort: 2 (Simple) | ~10 minutes

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Linked Issues check ⚠️ Warning The changes trigger success toast and redirect before/without a confirmed logout success, so failed logout would still navigate away instead of staying put. Move the toast and redirect to only after a successful logout response, and keep the user on the current page with an error message on failure.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly summarizes the logout redirect and storage cleanup fix tied to issue #83.
Out of Scope Changes check ✅ Passed The edits stay focused on the logout flow, redirect handling, and auth-state cleanup without introducing unrelated feature changes.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@client/src/components/Navbar.jsx`:
- Around line 142-153: The logout handler in Navbar’s logout flow only clears
userData, so ProtectedRoute can still treat the user as logged in. Update the
same handler to also reset isLoggedin, ideally by using the shared logoutUser
flow if available, so auth state is cleared consistently. Also move the success
toast out of the finally path so it only runs after a successful logout request,
not when the request fails.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 879f24d9-1c45-49e2-ab74-b5cbdd263af4

📥 Commits

Reviewing files that changed from the base of the PR and between 3a34369 and 544b816.

⛔ Files ignored due to path filters (1)
  • client/package-lock.json is excluded by !**/package-lock.json
📒 Files selected for processing (2)
  • client/src/components/Navbar.jsx
  • client/src/context/AppContext.jsx

Comment thread client/src/components/Navbar.jsx
@vercel

vercel Bot commented Jul 8, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
meetonmemory Ready Ready Preview, Comment Jul 8, 2026 2:37am

@imuniqueshiv imuniqueshiv added bug Something isn't working good first issue Good for newcomers ECSoC26 Eligible for Elite Coders Summer of Code 2026 automated scoring. good-issue +10 XP backend labels Jul 8, 2026
@imuniqueshiv imuniqueshiv merged commit 2535b39 into imuniqueshiv:main Jul 8, 2026
8 checks passed
@github-actions

github-actions Bot commented Jul 8, 2026

Copy link
Copy Markdown

🎉 Thank you for your contribution! Your pull request has been successfully merged. We appreciate your effort in improving MeetOnMemory, @palakgoda!

@imuniqueshiv

Copy link
Copy Markdown
Owner

@palakgoda Thank you for your contribution and for the time you invested in improving the logout workflow! 🚀

I really appreciate the effort you put into understanding the root cause and implementing a more robust solution. Your implementation not only fixes the 404 redirect issue but also improves the overall logout experience by handling client-side state cleanup, using React Router navigation instead of hard page reloads, and ensuring the application behaves gracefully even when the backend logout request cannot be completed.

I also appreciate that you followed the repository's contribution workflow by claiming the issue before working on it and kept the implementation aligned with the intended scope.

Thank you for being responsive throughout the review process and for incorporating the requested improvements. Everything looks good now, and I'm happy to merge this contribution! 🎉

Your work has made MeetOnMemory a little better for everyone. I hope to see more of your contributions in the future, and if you enjoy the project, consider giving the repository a ⭐.

Happy coding! 💙

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

backend bug Something isn't working ECSoC26-L1 ECSoC26 Eligible for Elite Coders Summer of Code 2026 automated scoring. good first issue Good for newcomers good-issue +10 XP

Projects

None yet

Development

Successfully merging this pull request may close these issues.

🐞 Fix Logout Redirect Causing 404 Error & Improve Logout User Experience

2 participants